//商品列表
Vue.component('ShopList', {
    template: `<div :id="id" :class="[layer?'layer':'']" :style="{'border':layerBorder}" style="display: flex; flex-wrap: wrap;">
    <div v-for="(item,index) in data" :key="index" style="width: 44%; margin-bottom: 15px; margin-left: 4%; border-radius: 10px; overflow: hidden; background: #fff;">
        <el-image style="width: 100%;height: 150px;" :src="item.src" fit="cover"></el-image>        
        <div style="display: flex; font-size: 12px; padding:5px 10px; flex-direction: column;">
            <span style="font-weight: 700;">{{item.name}}</span>
            <span style="margin-top: 5px;">{{item.main}}</span>
            <div style="margin-top: 5px; display: flex; justify-content: space-between;">
                <span style="color: #e90707;font-weight: 700;"><span style="font-size: 9px;">￥</span>{{item.amount}}</span>
                <div style="width: 20px; height: 20px; background-color: orange; border-radius: 50%; 
                    display: flex; align-items: center;justify-content: center;">
                    <i style="color: #fff;" class="el-icon-shopping-cart-2"></i>
                </div>
            </div>
        </div>
    </div>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
})
Vue.component('ShopListConfig', {
    template: `<el-card style="background-color: white;">
    <div class="table_titel">
    <div class="titel">商品列表组件</div>
    <div class="operation">
        <el-button type="primary" size="small" @click="add">插入组件</el-button>
    </div>
</el-card>`,
    mixins: [globalConfig],
    methods: {
        add() {

        },
    }
})